<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>变换div颜色</title>
    <style>
        p {
            text-align: center;
        }

        input[type="button"] {
            padding-left: 3px;
            cursor: pointer;
        }

        .outer {
            width: 330px;
            margin: 10px auto;
            text-align: center;
        }

        .div1 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
    <script>
        window.onload = function () {
            var oInput = document.getElementsByTagName("input");
            var oBut = oInput[0];
            var I = document.getElementsByClassName("div1");

            oBut.onclick = function(){
                for (var i=0; i<I.length; i++){
                    I[i].style.background = "green" ;
                   // console.log((I[i].style[background-color] ));
                }
            }
        }
    </script>
</head>

<body>
    <p>
        <input type="button" value="变换DIV颜色">
    </p>
    <div class="outer">
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
    </div>
</body>

</html>